<template>
	<view class="aboutUs">
		<u-navbar title=" " bgColor="#fff" :autoBack="true">
			<view slot="left"><uni-icons type="left" size="16" color="#000"></uni-icons></view>
			<view slot="center" style="color:#000">公告内容</view>
		</u-navbar>
		<rich-text :nodes="repairRichText(content)" class="richCon"></rich-text>
	</view>
</template>

<script>
	import {
		getAnnouncementInfo
	} from '@/api/api.js'
	export default {
		data() {
			return {
				pageTitle: '用户协议',
				imgUrl: this.$imgUrl,
				content: '',
				AnnounId: ''
			};
		},
		onLoad(op) {
			console.log('op', op)
			this.AnnounId = op.id;
		},
		onShow() {
			this.getAnnInfo()
		},
		methods: {
			//获取公告
			getAnnInfo() {
				this.content = uni.getStorageSync('announCon');
			},
			repairRichText(html) {
				// 去掉<img>中style /width / height属性
				let newContent = html.replace(/<img[^>]*>/gi, (match) => {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
					match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '') // 去除 style=""这样的属性
					return match
				})
				// 修改所有style里的width属性为max-width:100%
				newContent = newContent.replace(/style="[^"]+"/gi, (match) => {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;')
					return match
				})

				// 去掉所有<br/>标签
				newContent = newContent.replace(/<br[^>]*\/>/gi, '')
				// img标签添加style属性：max-width:100%;height:auto
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
				)
				return newContent;
			},
		}
	}
</script>

<style lang="scss">
	.aboutUs {
		padding: 200rpx 28rpx 60rpx;
		box-sizing: border-box;
		width: 100vw;
		min-height: 100vh;
		background: #F6F6F6;

		.richCon {
			width: 100%;

			img {
				width: 100%;
			}
		}
	}
</style>